<template>
  <div class="wrapper">
    <div class="login" @keyup.enter="handleSubmit('formInline')">
      <!-- 顶部logo 欢迎登录-->
      <div class="top-content" @click="$refs.verify.show = false">
        <div class="logo-box">
          <img :src="$store.state.logoImg" @click="$router.push('/')" />
          <div></div>
        </div>
      </div>
      <!-- 登录主体 包含轮播图 登录模块 -->
      <div class="login-container">
        <!-- 轮播 -->
        <Carousel
          loop
          :autoplay-speed="5000"
          class="login-carousel"
          arrow="never"
        >
          <CarouselItem>
            <div class="demo-carousel" @click="$refs.verify.show = false">
              <img src="../assets/images/login_bg_03.jpg"
                width="100%" 
                height="1080" 
                style="visibility: visible; height: 1080px; margin-left: 0px; margin-top: -200px; position: absolute; width: 100%;"
              >
            </div>
          </CarouselItem>
        </Carousel>
        <!-- 登录模块 -->
        <div class="form-box" @click="$refs.verify.show = false">
          <div class="account-number">
            <div class="tab-switch">
              <span>{{ type ? "会员登录" : "验证码登录" }}</span>
              <!--span @click="(type = !type), (scannerCodeLoginFLag = false)">{{
                type ? "验证码登录" : "账号登录"
              }}</span-->
            </div>
            <!--@click="(scannerCodeLoginFLag = !scannerCodeLoginFLag)"-->
            <div >
              {{ !scannerCodeLoginFLag ? "扫码登录" : "返回" }}
            </div>
          </div>
          <!--扫码登录 createPCLoginSession-->
          <div v-show="scannerCodeLoginFLag">
            <div class="qr-container">
              <div class="qr-shadow flex" v-show="qrCodeStatus == 'fail'">
                <span> 二维码已失效 </span>
                <Button size="small" @click="createPCLoginSession">刷新二维码</Button>
              </div>
              <vue-qr :text="qrCode" v-if="qrCode.indexOf('http') >= 0"
                :margin="0"
                :logoSrc='logoSrc'
                :logoMargin="3"
                :logoScale="0.13"
                :size="155"
                colorDark="#000"
                colorLight="#fff"
              ></vue-qr>
              <div v-else class="qr-box">
                <img :src="this.qrCode" class="img"></img>
              </div>
            </div>
            <div class="drag-area"> 
              <!--    等待扫码-->
              <div v-if="scannerCodeLoginStatus === 0" class="scanned">
                <p>用微信扫描二维码，打开小程序授权登录</p>
              </div>
              <!--    已经扫码-->
              <div v-else-if="scannerCodeLoginStatus === 1" class="scanned">
                <p>扫码成功，等待确认</p>
              </div>
              <!--    存在session，等待发送给客户端验证-->
              <div v-if="scannerCodeLoginStatus === 2" class="scanned">
                <p>登录成功，正在页面跳转</p>
              </div>
              <!--    已经发送登录请求-->
              <div v-else-if="scannerCodeLoginStatus === 3" class="quick-logining">
                <p>取消登录</p>
              </div>
              <div v-else-if="scannerCodeLoginStatus === 4" class="quick-logining">
                <p>二维码已过期</p>
              </div>
              <!--    会员状态 qindl  status = -1  -->
              <div v-else-if="scannerCodeLoginStatus === 5" class="quick-logining tal">
                <p>当前微信<span style="font-size: 16px; font-weight: 600;">未注册</span>成为会员，请联系我们客服；</p>
              </div>
              <!--    会员状态 qindl status = 0 -->
              <div v-else-if="scannerCodeLoginStatus === 6" class="quick-logining">
                <p>会员注册状态为<span style="font-size: 16px; font-weight: 600;">审核中</span>，请联系公司客服。</p>
              </div>
            </div>
          </div>

          <div>
            <div v-show="!scannerCodeLoginFLag">
              <!-- 账号密码登录 -->
              <Form
                ref="formInline"
                :model="formData"
                :rules="ruleInline"
                v-show="type === true"
                @click.self="$refs.verify.show = false"
              >
                <FormItem prop="username">
                  <i-input
                    type="text"
                    v-model="formData.username"
                    clearable
                    placeholder="用户名"
                  >
                    <Icon type="md-person" slot="prepend"></Icon>
                  </i-input>
                </FormItem>
                <FormItem prop="password">
                  <i-input
                    type="password"
                    v-model="formData.password"
                    clearable
                    placeholder="密码"
                  >
                    <Icon type="md-lock" slot="prepend"></Icon>
                  </i-input>
                </FormItem>
                <FormItem>
                  <Button
                    type="error"
                    @click.stop="handleSubmit('formInline')"
                    long
                    >登录</Button
                  >
                </FormItem>
              </Form>
              <!-- 验证码登录 -->
              <Form
                ref="formSms"
                :model="formSms"
                :rules="ruleInline"
                v-show="type === false"
                @click.self="$refs.verify.show = false"
              >
                <FormItem prop="mobile">
                  <i-input
                    type="text"
                    v-model="formSms.mobile"
                    clearable
                    placeholder="手机号"
                  >
                    <Icon type="md-lock" slot="prepend"></Icon>
                  </i-input>
                </FormItem>
                <FormItem prop="code">
                  <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
                    <Icon
                      type="ios-text-outline"
                      style="font-weight: bold"
                      slot="prepend"
                    />
                    <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
                  </i-input>
                </FormItem>
                <FormItem>
                  <Button
                    @click.stop="verifyBtnClick"
                    long
                    :type="verifyStatus ? 'success' : 'default'"
                    >{{ verifyStatus ? "验证通过" : "点击完成安全验证" }}
                  </Button>
                </FormItem>
                <FormItem>
                  <Button type="error" @click="handleSubmit('formSms')" long>登录</Button>
                </FormItem>
              </Form>
            </div>
            <div class="other">
              <div class="other-login">
                <!--svg
                  t="1631154795933"
                  class="icon"
                  @click="handleWebLogin('QQ')"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4969"
                  width="32"
                  height="32"
                >
                  <path
                    d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                    p-id="4970"
                    fill="#1296db"
                  ></path>
                </svg-->
                <svg
                  t="1631154766336"
                  class="icon weixin-logo"
                  @click="handleWebLogin('WECHAT_PC')"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3844"
                  width="32"
                  height="32"
                >
                  <path
                    d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
                    fill="#09BB07"
                    p-id="3845"
                  ></path>
                </svg>

                <div class="countdown" v-if="countdown <= duration && countdown > 0">{{ countdown }} 秒 </div>
              </div>
              <!--div class="register">
                <span style="color: red" @click="$router.push('signUp')"
                  >还没有账号？点击立即注册</span
                >
                <span @click="$router.push('forgetPassword')">忘记密码</span>
              </div-->
            </div>
          </div>
        </div>

        <!-- 拼图验证码 -->
        <verify
          ref="verify"
          class="verify-con"
          verifyType="LOGIN"
          @change="verifyChange"
        ></verify>
      </div>
    </div>
    
    <div class="foot">
        <!--Row type="flex" justify="space-around" class="help">
          <router-link to="/article" class="item" target="_blank"
            >帮助</router-link
          >
          <router-link
            to="/article?id=1371779927900160000"
            class="item"
            target="_blank"
            >隐私</router-link
          >
          <router-link
            to="/article?id=1371992704333905920"
            class="item"
            target="_blank"
            >条款</router-link
          >
        </Row-->
        <Row type="flex" justify="center" class="copyright">
          <a href="http://beian.miit.gov.cn/" target="_blank" class="text-center text-sm text-gray-400 hover:text-#FFF">备案号 桂ICP备14002690号-7 By © 2025 </a>
        </Row>
      </div>
  </div>
</template>

<script>
import * as RegExp from "@/plugins/RegExp.js";
import * as apiLogin from "@/api/login.js";
import { md5 } from "@/plugins/md5.js";
import { sendSms } from "@/api/common.js";
import {
  webLogin,
  loginCallback,
  sCLogin,
  getSCLoginCode,
} from "@/api/login.js";
import storage from "@/plugins/storage.js";
import verify from "@/components/verify";
import vueQr from "vue-qr";

export default {
  name: "Login",
  components: {
    verify,
    vueQr,
  },
  data() {
    return {
      qrCodeStatus: "success", //
      qrCode: "'http:fail;1234567890ABCDEFGHIJKLMNOPQ'",
      qrSessionToken: "",
      //是否是二维码登录
      logoSrc: require('@/assets/images/logoSrc.png'),
      config: require("@/config"),
      scannerCodeLoginFLag: false,
      scannerCodeLoginStatus: 0,
      qrCodeTimer: null,
      type: true, // true 账号登录  false 验证码登录
      formData: {
        // 登录表单
        username: "",
        password: "",
      },
      formSms: {
        // 手机号登录
        code: "",
        mobile: "",
      },
      verifyStatus: false, // 是否图片验证通过
      ruleInline: {
        // 验证规则
        username: [{ required: true, message: "请输入用户名" }],
        password: [
          { required: true, message: "请输入密码" },
          { type: "string", min: 6, message: "密码不能少于6位" },
        ],
        mobile: [
          { required: true, message: "请输入手机号码" },
          {
            pattern: RegExp.mobile,
            message: "请输入正确的手机号",
          },
        ],
        code: [{ required: true, message: "请输入手机验证码" }],
      },
      codeMsg: "发送验证码", // 验证码文字
      interval: null, // 定时器
      year: new Date().getFullYear(),
      
      //qindl 2024-04-26
      //二维码带的参数，用来判断是那个用户扫码的
      sceneStr: '', 
      //定时器
      timer: '',
      //倒计时
      duration: 60,
      time: 60, // 倒计时
      countdown: 60, 
      callbackUrl: '',
    };
  },
  watch: {
    scannerCodeLoginFLag(val) {
      !val ? this.clearInterval() : "";
    },
  },
  methods: {
    /******* 一、账号密码登录********************/
    // 登录
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.type) {
            this.$refs.verify.init();
          } else {
            let data = JSON.parse(JSON.stringify(this.formSms));
            apiLogin.smsLogin(data).then((res) => {
              this.$refs.verify.show = false;
              if (res.success) {
                this.$Message.success("登录成功");
                storage.setItem("accessToken", res.result.accessToken);
                storage.setItem("refreshToken", res.result.refreshToken);
                storage.setItem("getTimes", 0);
                apiLogin.getMemberMsg().then((res) => {
                  if (res.success) {
                    storage.setItem("userInfo", res.result);
                    let query = this.$route.query;
                    if (query.rePath) {
                      this.$router.push({
                        path: query.rePath,
                        query: JSON.parse(query.query),
                      });
                    } else {
                      this.$router.push("/");
                    }
                  }
                });
              } else {
                this.$Message.error(res.message);
              }
            });
          }
        }
      });
    },

    // 图片校验码
    verifyChange(con) {
      // 拼图验证码回显
      if (!con.status) return;

      if (this.type === true) {
        // 账号密码登录
        let data = JSON.parse(JSON.stringify(this.formData));
        data.password = md5(data.password);
        this.$refs.verify.show = false;
        this.$Spin.show();
        apiLogin
          .login(data)
          .then((res) => {
            if (res.success) {
              this.loginSuccess(
                res.result.accessToken,
                res.result.refreshToken
              );
            } else {
              this.$Spin.hide();
              this.$Message.error(res.message);
            }
          })
          .catch(() => {
            this.$Spin.hide();
          });
      } else {
        this.verifyStatus = true;
        this.$refs.verify.show = false;
      }
    },

    // 开启滑块验证
    verifyBtnClick() {
      if (!this.verifyStatus) {
        this.$refs.verify.init();
      }
    },

    /******* 二、手机验证码登录 ********************/
    // 发送手机验证码
    sendCode() {
      if (this.time === 60) {
        if (this.formSms.mobile === "") {
          this.$Message.warning("请先填写手机号");
          return;
        }
        if (!this.verifyStatus) {
          this.$Message.warning("请先完成安全验证");
          return;
        }
        let params = {
          mobile: this.formSms.mobile,
          verificationEnums: "LOGIN",
        };
        sendSms(params).then((res) => {
          if (res.success) {
            this.$Message.success("验证码发送成功");
            let that = this;
            this.interval = setInterval(() => {
              that.time--;
              if (that.time === 0) {
                that.time = 60;
                that.codeMsg = "重新发送";
                that.verifyStatus = false;
                clearInterval(that.interval);
              } else {
                that.codeMsg = that.time;
              }
            }, 1000);
          } else {
            this.$Message.warning(res.message);
          }
        });
      }
    },

    // 第三方登录 - 微信、QQ
    handleWebLogin(type) {
      //webLogin(type);
    },

    // 登录成功后跳转
    loginSuccess(accessToken, refreshToken) {
      this.$Message.success("登录成功");
      storage.setItem("accessToken", accessToken);
      storage.setItem("refreshToken", refreshToken);
      apiLogin.getMemberMsg().then((res) => {
        this.$Spin.hide();
        //console.info("loginSuccess@@res.result", JSON.stringify(res.result));
        if (res.success) {
          // 停止
          window.clearInterval(this.timer);
          this.countdown = this.duration;
          // 会员状态
          let loginUser = res.result || ''
          console.info("getUserBySceneStr@@@", loginUser)
          if (loginUser.state == '-1') {
            console.log('你还未注册成为会员，请先注册！')
            //this.$router.push("/pages/user/register/index");
            // 会员未注册
            this.scannerCodeLoginStatus = 5;
          } else if (loginUser.state == '0') {
            // 会员禁用
            this.scannerCodeLoginStatus = 6;
          } else if (loginUser.state == '1') {
            //this.$util.showLoading('会员登录成功！')
            // 会员启用
            storage.setItem("userInfo", loginUser);
            let query = this.$route.query;
            if (query.rePath) {
              this.$router.push({ path: query.rePath, query: JSON.parse(query.query),});
            } else {
              this.$router.push("/");
            }
          }
        }
      });
    },

    /***********************************************************************************************
     * 四、微信小程序扫码登录
     **********************************************************************************************/
    // 生成微信小程序二维码
    async createPCLoginSession() {
      getSCLoginCode({}).then((response) => {
        this.clearQRLoginInfo();
        if (response.code == 200) {
          let session         = response.result;
          this.qrSessionToken = session.token || '';
          this.duration       = session.duration || 60;
          this.countdown      = this.duration;
          this.qrCodeStatus   = "success";
          if (session.status === 0) {
            this.qrCode = "data:image/png;base64," + session.data;
            //this.qrCode = session.token;
            //轮询获取是否有人扫码
            this.timer = window.setInterval(this.qrLogin, 2000)
            //轮询二维码多久失效 *
            this.refreshQrCode();
          }
          //this.qrLogin(); 
        } 
      })
      .catch(() => {
        this.qrCodeStatus = "fail";
        this.countdown = this.duration;
      });
    },

    // 定时轮询查看，会员扫码登录状态
    async qrLogin() {
      if (!this.qrSessionToken) return;
      sCLogin(this.qrSessionToken, { beforeSessionStatus: this.scannerCodeLoginStatus }).then((response) => {
        if (response.success) {
          this.scannerCodeLoginStatus = response.result.status;
          switch (this.scannerCodeLoginStatus) {
            case 0:
            case 1:
              //this.qrLogin();
              break;
            case 2:
              this.loginSuccess(
                response.result.token.accessToken,
                response.result.token.refreshToken
              );
              break;
            case 3:
              this.createPCLoginSession();
              break;
            default:
              this.clearQRLoginInfo();
              break;
          }
        } else {
          this.clearQRLoginInfo();
        }
      })
      .catch((err) => {
        this.qrCodeStatus = "fail";
        this.countdown = this.duration;
      });
    },

    
    //TODO ----qindl--2023-09-24-----------------------------------------------
    /***
     * 1、获取取公众号二维码；2、js定时去确认用户是否扫码登录；3、登录成功；4、登录超时
     * 作者：qindl
     * 日期：2023-12-01
     */
    async getQrCode() {
      apiLogin.getQRCode().then(res => {
        this.clearQRLoginInfo()
        var data = res.result
        if (res.code !== 200) {
          console.info(data)
        } else {
          this.sceneStr = data.sceneStr
          //this.qrCode = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+data.ticket
          this.qrCode = data.url
          //轮询获取是否有人扫码
          this.timer = window.setInterval(this.getUserBySceneStr, 1000)
          this.qrCodeStatus = 'success'
          //轮询二维码多久失效 *
          this.refreshQrCode()
        }
      })
      .catch((err) => {
        console.log(err);
      });
    },
    
    /***
     * 根据 sceneStr 轮询查询用户信息，判断用户是否登录成功
     */
    async getUserBySceneStr() {
      if (!this.sceneStr) {
        return
      }
      //apiLogin.qrLogin
      apiLogin.qrLogin(this.sceneStr).then((res) => {
        var data = JSON.parse(JSON.stringify(res))
        if (data.code === 200) {
          let loginUser = data.result.userInfo || ''
          console.info("getUserBySceneStr@@@", data)
          if (loginUser.state === '-1') {
            console.log('你还未注册成为会员，请先注册！')
            //this.$router.push("/pages/user/register/index");
            // 会员未注册
            this.scannerCodeLoginStatus = 4;
          } else if (loginUser.state === '0') {
            // 会员禁用
            this.scannerCodeLoginStatus = 5;
          } else if (loginUser.state === '1') {
            //this.$util.showLoading('会员登录成功！')
            // 会员启用
            this.qrLoginSuccess(data.result)
          }
          window.clearInterval(this.timer)
        } else {
          //console.log(data.message);
        }
      })
    },

    // 登录成功函数
    async qrLoginSuccess(loginUser) {
      //this.$cart.syncCart()
      // uni.redirectTo({ url: this.callbackUrl || '/pages/index' })
      // this.$router.push('/pages/index');
      console.info("qrLoginSuccess", loginUser)
      var accessToken  = loginUser.accessToken
      var refreshToken = loginUser.refreshToken
      this.$Message.success("登录成功");
      storage.setItem("accessToken", accessToken);
      storage.setItem("refreshToken", refreshToken);
      apiLogin.getMemberMsg().then((res) => {
        this.$Spin.hide();
        console.info("loginSuccess@@", res)
        if (res.success) {
          storage.setItem("userInfo", res.result);
          let query = this.$route.query;
          if (query.rePath) {
            this.$router.push({ path: query.rePath, query: JSON.parse(query.query),});
          } else {
            this.$router.push("/");
          }
        }
      });
    },
    
    // 如果过期将二维码转为失效状态
    async refreshQrCode() {
      //默认是
      // if (this.qrCodeTimer) {
      //   return false
      // }
      this.qrCodeTimer = setInterval(() => {
        if (this.countdown === 0) {
          this.qrCodeStatus = 'fail'
          this.clearQRLoginInfo()
          console.info('状态失效@@22')
        } else {
          this.countdown--
        }
      }, 1000)
    },
    
    // 二维码失效，停止JS定时任务
    async clearQRLoginInfo() {
      //this.scannerCodeLoginStatus = 0;
      this.qrSessionToken = '';
      this.qrCode = 'http:fail;1234567890ABCDEFGHIJKLMNOPQ';
      this.qrCodeStatus = "fail";
      //停止 - 定时控制二维码失败
      if (this.qrCodeTimer) {
        clearInterval(this.qrCodeTimer);
      }
      this.qrCodeTimer = null
      //停止 - 监听用户是否扫码登录任务
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = null;
      this.countdown = this.duration;
    },

    // async refreshQrCode() {
    //   if (!this.qrCodeTimer) {
    //     this.qrCodeTimer = setInterval(() => {
    //       this.qrCodeStatus = "fail"; // 如果过期将二维码转为失效状态
    //     }, 10 * 1000);
    //   }
    // },

    // clearQRLoginInfo() {
    //   this.scannerCodeLoginStatus = 0;
    //   this.qrSessionToken = "";
    //   if (this.qrCodeTimer) {
    //     clearInterval(this.qrCodeTimer);
    //   }
    //   this.qrCodeTimer = null;
    // },

 
  },
  watch: {
    scannerCodeLoginFLag(v) {
      if (v && this.qrCode.indexOf('fail') > 0) {
        this.createPCLoginSession();
        //this.getQrCode();
        console.log("二维码登录");
      } else {
        console.log("取消二维码登录");
        this.clearQRLoginInfo();
      }
    },
    type(v) {
      if (v) {
        this.$refs.formInline.resetFields();
      } else {
        this.$refs.formSms.resetFields();
      }
      this.verifyStatus = false;
      this.$refs.verify.show = false;
      clearInterval(this.interval);
      this.codeMsg = "发送验证码";
      this.time = 60;
    },
  },
  destroyed() {
    this.clearQRLoginInfo();
  },
  mounted() {
    let uuid = this.$route.query.state;
    if (uuid) {
      storage.setItem("uuid", uuid);
      loginCallback(uuid).then((res) => {
        if (res.success) {
          this.loginSuccess(res.result.accessToken, res.result.refreshToken);
        }
      });
    }
    this.scannerCodeLoginFLag = true; 
  },
  onLoad(e) {
    if (e.callbackUrl) this.callbackUrl = e.callbackUrl
    //this.getQrCode()
  },
};
</script>
<style scoped lang="scss">
.drag-area {
  margin: 10px 0;
  p {
    margin: 8px 0;
    font-size: 14px;
  }
}
.login {
  min-height: calc(100vh - 40px);
}
.other {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qr-container {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  height: 160px;
  > .qr-shadow {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 50%;
    margin-left: -77px;
    top: 0;
    z-index: 99;
    width: 155px;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    > span {
      margin-bottom: 20px;
      font-size: 13px;
      letter-spacing: 2px;
    }
  }
  > .qr-box {
    width: 155px; 
    height: 155px; 
    overflow: hidden; 
    margin: 0 auto;
    img {
      width: 175px; 
      height: 197px; 
      position: relative; 
      top: -10px; 
      left: -10px;
      max-width: none;
    }
  }
}
.top-content {
  width: 100%;
  height: 80px;
  position: relative;
  z-index: 1;

  box-shadow: 0 1px 1px #ddd;
  background-color: #fff;

  .logo-box {
    width: 80%;
    max-width: 1200px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    img {
      width: 220px;
      cursor: pointer;
    }

    div {
      font-size: 20px;
      margin-top: 10px;
    }
  }
}
.pending-scan {
  margin-left: 20px;
  text-align: center;
  color: black;
}
.scanned {
  text-align: center;
  color: green;
}
.quick-logining {
  text-align: center;
  color: red;
}

.tal {
  text-align: left;
  margin-left: 20px;
  line-height: 30px;
}

.tar {
  text-align: right;
}

.login-carousel {
  width: 100%;
  height: 550px;

  .demo-carousel {
    height: 550px;
    width: inherit;
    display: flex;
    justify-content: center;
  }
}

.login-container {
  position: relative;
  width: 100%;
  height: 550px;
}

.form-box {
  width: 350px;
  box-sizing: border-box;
  position: absolute;
  top: 80px;
  right: 15%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);

  .account-number {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: bold;

    > div:nth-child(2) {
      color: $theme_color;
      cursor: pointer;
    }

    .tab-switch {
      height: 40px;
      font-size: 14px;

      span:nth-child(1) {
        font-size: 16px;
        border-right: 1px solid #ddd;
        padding-right: 10px;
      }

      span:nth-child(2) {
        cursor: pointer;
        padding-left: 10px;

        &:hover {
          color: $theme_color;
        }
      }
    }
  }
}

.verify-con {
  position: absolute;
  right: 16%;
  top: 90px;
  z-index: 10;
}

.other-login {
  text-align: right;
  > svg {
    cursor: pointer;
    width: 24px;
    margin-right: 10px;
    height: 24px;
  }
  
  > .countdown {
    width: 60px; 
    height: 24px; 
    line-height: 24px; 
    color: red; 
    font-size: 14px; 
    font-weight: bold; 
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}

.register {
  display: flex;
  margin-top: -10px;
  span {
    margin-left: 10px;
    &:hover {
      cursor: pointer;
      color: $theme_color;
    }
  }
}

.foot {
  bottom: 2vh;
  width: 368px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin: 0 auto;
  .help {
    margin: 0 auto;
    margin-bottom: 1vh;
    width: 60%;

    .item {
      color: rgba(0, 0, 0, 0.45);
    }

    :hover {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}

.icon-hover {
  cursor: pointer;
}

</style>
